<template>
  <div :class="[{ 'fill-base': !isMySite }]" style="padding-bottom: 16px">
    <div class="title-box" v-if="!isMySite">
      <div class="title-text">{{ o.data.title }}</div>
      <div class="title-more">+查看更多</div>
    </div>
    <div class="case-box" :class="[{ 'fill-base': !isMySite }]">
      <img
        class="case-cover"
        src="https://lbqny.migugu.com/admin/diy/default.png"
      />
      <div class="roller-box" v-if="o.data.isShowTimeline">
        <div class="roller-item">
          <img class="roller-avatar" />
          <div style="flex: 1">此处是工地动态</div>
        </div>
      </div>
      <div class="case-bottom fill-base">
        <div class="flex-y-center ellipsis">
          <div class="case-tag" style="background: #13d567; color: #fff">
            施工状态
          </div>
          <div class="flex-1 f-title case-title text-bold ellipsis">
            工地标题
          </div>
        </div>
        <div class="flex-y-center mt-md">
          <div class="case-tag">风格</div>
          <div class="case-tag">面积</div>
          <div class="case-tag">价格</div>
        </div>
        <div class="flex-y-center mt-lg">
          <div class="f-caption c-caption">99浏览</div>
          <div class="f-caption c-caption ml-md">999收藏</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'site',
  props: {
    o: Object,
    isMySite: false
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fill-base {
  background: white;
}
.case-box {
  height: 290px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  position: relative;
  font-size: 14px;
  margin: 0 16px;
  box-sizing: border-box;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}
.roller-item {
  display: flex;
  align-items: center;
  height: 20px;
  line-height: 1;
}
.roller-box {
  position: absolute;
  top: 160px;
  left: 16px;
  width: 155px;
  height: 20px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  font-size: 12px;
  color: #fff;
  padding: 0 2px;
}
.roller-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 5px;
  background: #eaeaea;
}
.case-cover {
  width: 100%;
  height: 193px;
  display: block;
}
.case-bottom {
  width: 100%;
  height: 97px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 16px;
  position: relative;
  line-height: 1;
}
.case-title {
  color: #414851;
  width: 255px;
}
.case-tag {
  line-height: 1;
  display: inline-block;
  color: #13d567;
  border: 1px solid #13d567;
  border-radius: 4px;
  font-size: 10px;
  padding: 4px 6px;
  margin-right: 5px;
}
.flex-y-center {
  display: flex;
  align-items: center;
}
.mt-md {
  margin-top: 8px;
}
.mt-lg {
  margin-top: 16px;
}
.ml-md {
  margin-left: 8px;
}
.f-caption {
  font-size: 12px;
}
.c-caption {
  color: #999;
}
.title-box {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 16px;
}
.title-text {
  flex: 1;
}
.title-more {
  color: #13d567;
}
</style>
